<template>
  <a-date-picker placeholder="请选择日期" @change="ChangeDate" v-model="defaultVal" :format="yearFormat" allowClear :mode="calendarType"
    @panelChange="ChangeYear" :open="endOpen" @openChange="handleEndOpenChange" :disabled="disabled">
    <a-icon slot="suffixIcon" type="smile" />
  </a-date-picker>
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'Date',
    props: {
      disabled:{
        type: Boolean,
        default: false
      },
      calendarType: {
        type: String,
      },
      yearFormat: {
        type: String,
        required: false
      },
      value: {
        type: String,
        required: false
      },
    },
    data() {
      return {
        defaultVal: null,
        endOpen: false,

      }
    },
    methods: {
      //选择年份用
      ChangeYear: function(val) {
        this.defaultVal = val
        this.endOpen = false;
        this.$emit('change', val.format('YYYY'))
      },
      //选择年份用
      handleEndOpenChange: function(open) {
        this.endOpen = open;
      },
      //选择年月日用
      ChangeDate(date, dateString) {
        this.defaultVal = moment(dateString)
        this.$emit('change', dateString)
      },
    },
    watch: {
      value(val) {
        if (!val) {
          this.defaultVal = null
        } else {
          this.defaultVal = moment(val)
        }
      }
    },

  }
</script>

<style>
</style>
